<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>vue</title>
        <!-- 引入vue文件-->
		<!--<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>-->
		<script src="https://unpkg.com/vue/dist/vue.min.js"></script>
		<!--引入路由-->
		<script src="https://unpkg.com/vue-router@2.0.0/dist/vue-router.js"></script>
	</head>
	<body>
		<div id="vue">
			<ul>
				<!-- 使用 router-link 组件来导航. -->
			    <!-- 通过传入 `to` 属性指定链接. -->
			    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
				<router-link to="/home">主页</router-link>
				<br />
    			<router-link to="/news">新闻</router-link>
			</ul>
			<!-- 路由出口 -->
  			<!-- 路由匹配到的组件将渲染在这里 -->
			<div>
				<router-view></router-view>
			</div>
		</div>
	</body>
	<script type="application/javascript">
		//1.准备根组件
		var App=Vue.extend();
		
		var Home=Vue.extend({
			template:'<h3>我是主页</h3>'
		});
		var News=Vue.extend({
			template:'<h3>我是新闻</h3>'
		});
		// 2. 定义路由
		// 每个路由url应该映射一个组件。 其中"component" 可以是
		// 通过 Vue.extend() 创建的组件构造器，
		// 或者，只是一个组件配置对象。
		var routes = [
		  { path: '/', redirect:'/home' }, /*重定向*/
		  { path: '/home', component: Home },
		  { path: '/news', component: News }
		]
		// 3. 创建 router 实例，然后传 `routes` 配置,你还可以传别的配置参数
		var router = new VueRouter({
		    routes: routes
		})
		// 4. 创建和挂载根实例,通过 router 配置参数注入路由，从而让整个应用都有路由功能
		var app = new Vue({
		  router:router
		}).$mount('#vue')
		// 现在，应用已经启动了！
	</script>
</html>
